<template>
  <div class="app-container">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="待审" name="first">
        <el-table v-loading="uncheckedListLoading" :data="uncheckedlist" element-loading-text="Loading" stripe>
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column label="车牌号" prop="carNo" />
          <el-table-column label="登记时间" prop="registrationTime" />
          <!--
          <el-table-column label="车辆负责人" prop="personInChargeName" />
          <el-table-column label="手机" prop="personInChargePhone" />
          -->
          <el-table-column label="车辆负责部门">
            <template slot-scope="scope">
              {{ scope.row.deptName}}
            </template>
          </el-table-column>
          <el-table-column label="驾驶员姓名" prop="driverName"/>
          <el-table-column label="驾驶员电话" prop="driverPhone" />
          <el-table-column label="有效期限" prop="endDate" />
          <el-table-column fixed="right" label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button-group>
                <el-button plain type="success" size="mini" @click="openDetail(scope.row)">详情</el-button>
                <el-button plain type="primary" size="mini" @click="agree(scope.row.id)">同意</el-button>
                <el-button plain type="danger" size="mini" @click="disagree(scope.row.id)">不同意</el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="uncheckedTotal > 0" :total="uncheckedTotal" :page.sync="uncheckedForm.pageNum" :limit.sync="uncheckedForm.pageSize"
                    @pagination="fetchUncheckedData" style="text-align: center;" />
      </el-tab-pane>
      <el-tab-pane label="已通过" name="second">
        <div class="filter-container">
          <el-input v-model="checkedForm.searchValue" size="small" placeholder="请输入关键词" clearable @clear="refresh" style="width: 300px;">
            <el-button slot="append" icon="el-icon-search" @click="search" type="primary">搜索</el-button>
          </el-input>
        </div>

        <el-divider />

        <el-table v-loading="checkedListLoading" :data="checkedlist" element-loading-text="Loading" stripe>
          <el-table-column type="index" label="序号" width="50" />
          <el-table-column label="车牌号" prop="carNo" />T
          <el-table-column label="登记时间" prop="registrationTime" />
          <!--
          <el-table-column label="车辆负责人" prop="personInChargeName" />
          <el-table-column label="手机" prop="personInChargePhone" />
          -->
          <el-table-column label="车辆负责部门">
            <template slot-scope="scope">
              {{ scope.row.deptName }}
            </template>
          </el-table-column>
          <el-table-column label="驾驶员姓名" prop="driverName"/>
          <el-table-column label="驾驶员电话" prop="driverPhone" />
          <el-table-column label="有效期限" prop="endDate" />
          <el-table-column
              label="审批状态"
              width="80"
              align="center">
            <template slot-scope="scope">
          <span>
            <template v-if="scope.row.examineStatus === 0">待审</template>
            <template v-else-if="scope.row.examineStatus === 1">已通过</template>
            <template v-else>已拒绝</template>
          </span>
            </template>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-button-group>
                <el-button type="primary" icon="el-icon-edit" size="mini" @click="openDetail(scope.row)" plain>详情</el-button>
              </el-button-group>
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="checkedTotal > 0" :total="checkedTotal" :page.sync="checkedForm.pageNum" :limit.sync="checkedForm.pageSize"
                    @pagination="fetchCheckedData" style="text-align: center;" />
      </el-tab-pane>
    </el-tabs>

    <el-dialog :visible.sync="dialogVisible" title="详情">
      <el-form ref="dataForm" :model="temp" label-width="120px" label-position="right" v-if="temp">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="车牌号">
              <span>{{temp.carNo}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="登记时间">
              <span>{{temp.registrationTime}}</span>
            </el-form-item>
          </el-col>
          <!--
          <el-col :span="12">
            <el-form-item label="车辆负责人">
              <span>{{temp.personInChargeName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机">
              <span>{{temp.personInChargePhone}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="员工号">
              <span>{{temp.employeeNumber}}</span>
            </el-form-item>
          </el-col>
          -->
          <el-col :span="12">
            <el-form-item label="车辆负责部门">
              <span>{{temp.deptName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="驾驶员姓名">
              <span>{{temp.driverName}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="驾驶员手机">
              <span>{{temp.driverPhone}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="身份证号">
              <span>{{temp.driverIdcard}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="审批状态">
              <span>{{temp.examineStatus === 0 ? '待审' : (temp.examineStatus === 1 ? '已通过' : '已拒绝')}}</span>
            </el-form-item>
          </el-col>
          <template v-if="temp.examineStatus !== 0">
            <el-col :span="12">
              <el-form-item label="审批人">
                <span>{{temp.examineUserId}}</span>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="审批意见">
                <span>{{temp.examineOpnion}}</span>
              </el-form-item>
            </el-col>
          </template>
          <el-col :span="12">
            <el-form-item label="有效期始">
              <span>{{temp.startDate}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="有效期止">
              <span>{{temp.endDate}}</span>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <span>{{temp.remark}}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <template v-if="temp.examineStatus === 0">
          <el-button type="primary" @click="agree(temp.id)">同 意</el-button>
          <el-button type="danger" @click="disagree(temp.id)">不同意</el-button>
        </template>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import Pagination from '@/components/Pagination'
  import {
    getList,
    longTimeCar,
    longTimeCarCheck
  } from '@/api/long'
  import {
    deepClone
  } from '@/utils'

  export default {
    components: {
      Pagination
    },
    data() {
      return {
        dialogVisible: false,
        activeName: 'first',
        uncheckedTotal: 0,
        uncheckedlist: [],
        uncheckedListLoading: false,
        uncheckedForm: {
          pageNum: 1,
          pageSize: 10,
          examineStatus: 0
        },
        checkedTotal: 0,
        checkedlist: [],
        checkedListLoading: false,
        checkedForm: {
          pageNum: 1,
          pageSize: 10,
          examineStatus: 1,
          searchValue: ''
        },
        temp: { examineStatus: 0 }
      }
    },
    mounted() {
      this.fetchUncheckedData()
      this.fetchCheckedData()
    },
    methods: {
      // 详情对话框
      openDetail(row) {
        this.temp = row
        this.dialogVisible = true
      },
      agree(id) {
        // 同意
        var data = {
          id: id,
          status: 1
        }
        this.toExamine(data)
      },
      disagree(id) {
        // 不同意
        var data = {
          id: id,
          status: 2
        }
        this.toExamine(data)
      },
      search() {
        this.fetchCheckedData()
      },
      refresh() {
        this.uncheckedForm = {
          pageNum: 1,
          pageSize: 10,
          examineStatus: 0
        }
        this.fetchCheckedData()
      },
      toExamine(data) {
        longTimeCarCheck(data).then(response => {
          if (response.code === 200) {
            this.$message.success("审批完成！")
            this.fetchUncheckedData()
            this.fetchCheckedData()
          } else {
            this.$message.error("审批失败：" + response.msg)
          }
        })
      },
      // 获取未审列表
      fetchUncheckedData() {
        this.uncheckedListLoading = true
        getList(this.uncheckedForm).then(response => {
          if (response.code === 200) {
            this.uncheckedlist = response.rows
            this.uncheckedTotal = response.total
          } else {
            this.$message.error("获取待审列表失败：" + response.msg)
          }
          this.uncheckedListLoading = false
        })
      },
      // 获取已审列表
      fetchCheckedData() {
        this.checkedListLoading = true
        getList(this.checkedForm).then(response => {
          if (response.code === 200) {
            this.checkedlist = response.rows
            this.checkedTotal = response.total
          } else {
            this.$message.error("获取已审列表失败：" + response.msg)
          }
          this.checkedListLoading = false
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .el-upload {
    border: 1px dashed #d9d9d9 !important;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;

    .el-icon-plus.avatar-uploader-icon {
      border: 1px dashed #d9d9d9 !important;
      border-radius: 6px;
      font-size: 28px;
      color: #8c939d;
      width: 128px;
      height: 128px;
      line-height: 128px;
      text-align: center;
    }
  }

  .avatar-uploader {
    height: 128px;

    img {
      width: 128px;
      height: 128px;
    }
  }
</style>
